<template>
  <view :style="{paddingBottom: safeBottom + 'px'}" style="height: 100vh;background-color: #182f4d">
    <view :style="{height: height + 'px'}"></view>
    <!-- 顶部自定义导航 -->
    <TnNavbar fixed alpha customBack :placeholder="false" bg-color="transparent" :bottom-shadow="false">
      <view slot="back" class='tn-custom-nav-bar__back'>
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
      <text class="text-white">剧情任务</text>
    </TnNavbar>
    <scroll-view scroll-y :style="{height: `calc(100vh - ${height +safeBottom}px)`}">
      <view class="flex align-center margin">
        <view
            @click="changeTab(item)"
            v-for="item in tabsData"
            class="cu-tag bg-blue radius padding" :class="item !== currentTab ? 'light' : ''">
          {{ item }}
        </view>
      </view>

      <view style="padding: 0 30rpx">
        <uni-collapse accordion v-model="accordionVal" ref="collapse">
          <uni-collapse-item v-for="(v, i) in adventureChapter[currentTab]" :border="false" title-border="none">
            <template v-slot:title>
              <view style="color: #b7cdfe">{{ i }}</view>
            </template>
            <view @tap="toStory(v1)" v-for="v1 in v" style="padding: 5px 0">
              <image :src="`https://seerh5.61.com/resource/assets/mainLine/ChapterItem/${v1.id}.png`"
                     style="width: 100%;height: 140px"></image>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </scroll-view>
    <loading-page :show="showLoading" @click.stop=""/>
  </view>
</template>

<script setup>
  import TnNavbar from "../../uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue";
  import {useUniAppSystemRectInfo} from "../../uni_modules/tuniaoui-vue3";
  import {ref, getCurrentInstance, onMounted, nextTick} from 'vue';
  import LoadingPage from "../../components/loadingPage.vue";
  import {onShareAppMessage} from '@dcloudio/uni-app'

  onShareAppMessage(() => {
    return {
      title: '剧情任务',
      imageUrl: 'https://seerforwdw.info/seer-image/diduo.jpg',
      path: '/pagesA/story/chapter'
    }
  })

  const {height} = useUniAppSystemRectInfo().navBarInfo
  const safeBottom = ref(0)

  const {proxy} = getCurrentInstance()

  const adventureChapter = ref({})
  const getACList = async () => {
    showLoading.value = true
    adventureChapter.value = await proxy.$api.getAdventureChapter()
    setTimeout(() => {
      accordionVal.value = '0'
    }, 100)
    showLoading.value = false
  }

  const collapse = ref(null)

  const currentTab = ref('最新剧情')
  const tabsData = ref(['最新剧情', '主线剧情', '支线剧情'])
  const changeTab = (item) => {
    accordionVal.value = ''
    currentTab.value = item

    setTimeout(() => {
      accordionVal.value = '0'
      nextTick(() => {
        collapse.value.resize()
      })
    }, 100)
  }

  const showLoading = ref(false)

  const accordionVal = ref('')

  // 跳转到故事列表
  const toStory = (item) => {
    uni.navigateTo({
      url: './story?story=' + JSON.stringify(item.story) + '&title=' + item.title + '&id=' + item.id + '&des=' + item.des
    })
  }

  onMounted(() => {
    getACList()
    uni.getSystemInfo({
      success: res => {
        safeBottom.value = res.safeAreaInsets.bottom
      }
    });
  })
</script>

<style lang="scss">
  .article-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }

  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  :deep(.uni-collapse) {
    background-color: transparent !important;
  }

  :deep(.uni-collapse-item) {
    padding: 10px 0 0;
  }

  :deep(.uni-collapse-item__wrap) {
    background-color: transparent !important;
  }
</style>
